<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商城产品列表</title>
    <%@include file="../common/header.jsp" %>
      <script type="text/javascript">
    </script>
</head>
<body>

<%@include file="../common/top.jsp" %>
<form action="${pathUrl }/home/goods/indexList" id="priceForm" method="post">
<div class="section">
    <div class="screen-box">
        <!--分类-->
        <dl>
            <dt>分类：</dt>
            <dd class="catalog">
            <a href="javascript:; data-id="-1" class="selected" >全部</a>
            <c:forEach items="${goodsCatalogsDataList}" var="gc">
            <a href="javascript:;" data-id="${gc.id}">${gc.name}</a>
            </c:forEach>
            </dd>
        </dl>
        <!--/分类-->
        <!--价格-->
        <dl>
            <dt>价格：</dt>
            <dd class="priceDD">
                <a href="javascript:;" data-id="-1" class="selected" >全部</a>
                <a href="javascript:;" data-id="0">0-100元</a>
                <a href="javascript:;" data-id="1">101-500元</a>
                <a href="javascript:;" data-id="2">501-1000元</a>
                <a href="javascript:;" data-id="3">1001-2000元</a>
                <a href="javascript:;" data-id="4">2000以上</a>
            </dd>
        </dl>
        <!--/价格-->
    </div>

    <div class="sort-box">
        <a href="javascript:;" data-id="-1" class="selected" >上架时间</a>
        <a href="javascript:;"  data-id="0">按人气</a>
        <a href="javascript:;"  data-id="1">价格从高到低</a>
        <a href="javascript:;"  data-id="2">价格从低到高</a>
    </div>
        <div id="loadDiv">
    	加载中...
    </div>
    <div id="pagerDiv" style="margin-top: 5px;"></div>
   
</div>
<input type="hidden" name="catalogId" id="catalogId"  >
<input type="hidden" name="priceType" id="priceType">
<input type="hidden" name="orderType" id="orderType" >
</form>

<div class="section qitian-main">
    <img src="${pathUrl}/public/images/qitian.png">
</div>
<div class="footer-copyright">
    <p>软信商城©2013-2017 软信大学版权所有 京ICP备17017089号 京公网安备11000002000006号</p>
</div>
<jsp:include page="../../common/laypage.jsp"/>
<script type="text/javascript">
$(function(){
	ajaxLoad();
	$(".catalog a").click(function(){
		var catalogId=$(this).attr("data-id");
		$(this).addClass("selected");
		$(this).siblings().removeClass("selected");
		$("#catalogId").val(catalogId);
		ajaxLoad();
	});
	$(".priceDD a").click(function(){
		var priceType=$(this).attr("data-id");
		$(this).addClass("selected");
		$(this).siblings().removeClass("selected");
		$("#priceType").val(priceType);
		ajaxLoad();
	});
	$(".sort-box a").click(function(){
		var orderType=$(this).attr("data-id");
		$(this).addClass("selected");
		$(this).siblings().removeClass("selected");
		$("#orderType").val(orderType);
		ajaxLoad();
	});
});
//异步加载数据
function ajaxLoad(){
	//使用异步加载数据的分装方法
	loadTable("priceForm","loadDiv","pagerDiv");
}
</script>
</body>
</html>